<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>canvas { width: 100%; height: 100% }</style>
    <script src="../libs//three.min.js"></script>
</head>
<body>
    <script>
        var scene = new THREE.Scene();
		
        var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
		
        var renderer = new THREE.WebGLRenderer();
		
        renderer.setSize(window.innerWidth, window.innerHeight);
		
        document.body.appendChild(renderer.domElement);

		axesHelper0 = new THREE.AxesHelper(2);
		scene.add(axesHelper0); 
		axesHelper1 = new THREE.AxesHelper(1);
		axesHelper2 = new THREE.AxesHelper(1);
		

		var localSystem1 = new THREE.Object3D()
		scene.add(localSystem1)

		var localSystem2 = new THREE.Object3D()
		scene.add(localSystem2)
		
		
		// line
		const material = new THREE.LineBasicMaterial({
			color: 0xff0000
		});
		
		const points = [];
		points.push( new THREE.Vector3( 0.0, 0.0, 0.1 ) );
		points.push( new THREE.Vector3( 0.0, 0.4, 0.1 ) );
		points.push( new THREE.Vector3( 0.6, 0.0, 0.1 ) );
		points.push( new THREE.Vector3( 0.0, 0.0, 0.1 ) );
		
		const geometry = new THREE.BufferGeometry().setFromPoints( points );
		
		const mesh1 = new THREE.Line( geometry, material );
		localSystem1.add(mesh1)
		localSystem1.add(axesHelper1)
		
		
		const mesh2 = new THREE.Line( geometry, material );
		localSystem2.add(mesh2)
		localSystem2.add(axesHelper2)
		// scene.add( mesh ); 
 
		camera.position.x = 0.1;
		camera.position.y = 0.2;
		camera.position.z = 2;
		localSystem1.position.x = -1.0;
		localSystem1.rotation.x = 0.5;
		localSystem2.position.x = 0.8;
		localSystem2.rotation.x = -1.0;
		var time = 0;
        function render() {
            requestAnimationFrame(render);
	    if( time > 200 && time < 2000 ) {
	      // 对象绕世界坐标系的x轴旋转,以下三种
              localSystem1.rotation.y += 0.01; 
	      // localSystem1.rotateY( 0.01 );
	      // localSystem1.rotateOnAxis(new THREE.Vector3(0,1,0), 0.01 );

	      // 对象绕世界坐标系的x轴旋转
	      localSystem2.rotateOnWorldAxis(new THREE.Vector3(0,1,0), 0.01 );
	    }
            renderer.render(scene, camera);
	    time ++;			
        }
		 
        render();
    </script>
</body>
</html>